<!-- 这是编程主页面 -->
<template>
  <main>
    <!-- 头部 -->
    <headerIndex></headerIndex>
    <!-- 侧边拦 -->
    <el-row class="content">
      <!-- 拖拽的编程支架 -->
      <el-col :span="6">
        <asideCodeSupport></asideCodeSupport>
      </el-col>
      <el-col :span="12">
        <codeEditorIndex></codeEditorIndex>
      </el-col>
      <el-col :span="6">
        <codeSpriteIndex></codeSpriteIndex>
      </el-col>
    </el-row>
  </main>
</template>

<script setup>
import headerIndex from '@/components/header/index.vue'
import asideCodeSupport from '@/components/body/codeSupport/index.vue'
import codeEditorIndex from '@/components/body/codeEditor/index.vue'
import codeSpriteIndex from '@/components/body/codeSprite/index.vue'
import { userLogin } from '@/apis/login.js'
import { onMounted } from 'vue'
import { useUserStore } from '@/stores/index'

defineOptions({
  name: 'mainView'
})

const userStore = useUserStore()
// 一打开就向服务器发送登录请求
const handleLogin = async () => {
  const userInfo = {
    username: 'admin1234',
    password: '123456'
  }
  const res = await userLogin(userInfo)
  // console.log(res)
  const {
    data: { token }
  } = res
  console.log(token)
  userStore.setUserToken(token)
}
onMounted(() => {
  handleLogin()
})
</script>

<style lang="less" scoped>
@black-color: #282c34;
main {
  background-color: @black-color;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>
